<template>
  <div class="main">
    <div class="anime3Area">
      <div id="anime_ex3"></div>
      <div class="rotate">
        <img src="~assets/img/experiment/rotate.png" style="width: 40px">
        <span style="color:#fff">按住左键拖动改变视角</span>
      </div>
    </div>
  </div>
</template>

<script>
import {AnimePlay} from "utils/experiment/ex3/AnimePlay";
import {getOrder, getPlaneOrder} from "network/experiment/experiment";

export default {
  name: "ex3_right",
  data() {
    return {
      loading: true,
      orderHash: [],
    }
  }, created() {
    this.loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    let colorHash = []
    colorHash['红'] = 1;
    colorHash['黄'] = 2;
    colorHash['蓝'] = 3;
    this.colorHash = colorHash
    getOrder()
      .then(res => {
        this.tableData = res.data.order
        this.options = res.data.order
        let items = []
        items.push({id: 1, name: '红'});
        items.push({id: 2, name: '黄'});
        items.push({id: 3, name: '蓝'});
        this.items = items
        for (let i = 0; i < 9; ++i) {
          this.orderHash[this.tableData[i].id] = i;
        }
        getPlaneOrder()
          .then(res => {
            let tmp = res.data;
            let order = [];
            for (let i = 0; i <= 12; ++i) {
              let key = this.orderHash[tmp[i].order_id]
              order.push({
                time: this.tableData[key].time,
                light: this.tableData[key].light,
                planeId: tmp[i].id,
                orderId: tmp[i].order_id,
              })
            }
            this.planeArr = order;
            AnimePlay(this)
          })
      })

  },
  computed: {
    tableData: {
      get() {
        return this.$store.state.ex3.tableData
      },
      set(value) {
        this.$store.commit('changeEx3TableData', value)
      }
    },
    planeNum: {
      get() {
        return this.$store.state.ex3.planeNum
      },
      set(value) {
        this.$store.commit('changeEx3PlaneNum', value)
      }
    },
    colorHash: {
      get() {
        return this.$store.state.ex3.colorHash
      },
      set(value) {
        this.$store.commit('changeEx3ColorHash', value)
      }
    },
    items: {
      get() {
        return this.$store.state.ex3.items
      },
      set(value) {
        this.$store.commit('changeEx3Items', value)
      }
    },
    options: {
      get() {
        return this.$store.state.ex3.options
      },
      set(value) {
        this.$store.commit('changeEx3Options', value)
      }
    },
    planeArr: {
      get() {
        return this.$store.state.ex3.planeArr
      },
      set(value) {
        this.$store.commit('changeEx3PlaneArr', value)
      }
    },
    value: {
      get() {
        return this.$store.state.ex3.value
      },
      set(val) {
        this.$store.commit('changeEx3Value', val)
      }
    }
  },
  mounted() {
    // this.$nextTick(function () {
    //   // AnimePlay(this)
    // })
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex3/ex3_right.css";
</style>
